<template>
  <view class="card" :class="className + (contain ? ' contain' : '')">
    <view class="card-header">
      <text class="text-18px text-black">{{ title }}</text>
      <text v-if="moreBtn">更多</text>
    </view>
    <view class="card-content" :class="!contain ? ' contain' : ''">
      <view class="pt5px pb5px sub-title" v-if="subTitle"><text>{{ subTitle }}</text></view>
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    subTitle: String,
    moreBtn: Boolean,
    contain: Boolean,
    className: String,
  }
}
</script>

<style lang="scss" scoped>
.card {
  &.contain {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
  }
  &-header {
    display: flex;
    justify-content: space-between;
  }
  &-content {
    margin-top: 10px;
    &.contain {
      background-color: #fff;
      // padding: 10px;
      padding-top: 0;
      border-radius: 5px;
      .sub-title {
        padding: 10px;
      }
    }
  }
}
</style>